<template>
  <div>
    <div ref="chart" style="width:50%;height:300px;display: inline-block"></div>
  </div>
</template>

<script>
import request1 from "@/utils/request1";

export default {
  name: "TotalChart",
  data() {
    return {
      student: '',
      teacher: '',
      course: '',
      department: '',
      sct: ''
    }
  },
  created() {
    this.getTotalOfStudent()
    this.getTotalOfTeacher()
    this.getTotalOfCourse()
    this.getTotalOfDepartment()
    this.getTotalOfSct()
  },
  mounted() {
    setTimeout(() => {
      this.getChartData()
    }, 1000)
  },
  methods: {
    getTotalOfStudent() {
      request1.get('/chart/getTotal/' + 'student').then(res => {
        this.student = res.data
      })
    },
    getTotalOfTeacher() {
      request1.get('/chart/getTotal/' + 'teacher').then(res => {
        this.teacher = res.data
      })
    },
    getTotalOfCourse() {
      request1.get('/chart/getTotal/' + 'course').then(res => {
        this.course = res.data
      })
    },
    getTotalOfDepartment() {
      request1.get('/chart/getTotal/' + 'department').then(res => {
        this.department = res.data
      })
    },
    getTotalOfSct() {
      request1.get('/chart/getTotal/' + 'sct').then(res => {
        this.sct = res.data
      })
    },
    getChartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          title: {
            text: '数量',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          xAxis: {
            type: 'category',
            data: ['学生数量', '教师数量', '课程数量', '院系数量', '选课数量'],
            "axisLabel": {
              interval: 0,
              rotate: 30,
            },
            triggerEvent: true,
          },
          yAxis: {
            type: 'value',
            minInterval: 1,
          },
          series: [
            {
              data: [this.student, this.teacher, this.course, this.department, this.sct],
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        };
        option && myChart.setOption(option);
      }
    },
  }
}
</script>

